<template>
  <div class="app-container">
    <el-tabs style="margin:-10px -20px 0px -20px;" type="border-card" v-loading="loading">
      <el-table :data="list" border fit highlight-current-row class="infotable" align="center">
        <el-table-column label="图片" width="70" align="center">
          <template slot-scope="scope">
            <!--显示50x50的图标-->
            <img
              :src="urlBase+'/product/'+scope.row.ProductDataID.toString()+'/5/'+scope.row.FileName"
            />
          </template>
        </el-table-column>
        <el-table-column label="商品编号" width="80" align="center">
          <template slot-scope="scope">{{scope.row.ProductDataID}}</template>
        </el-table-column>
        <el-table-column label="商品名称" width="auto" align="center">
          <template slot-scope="scope">{{scope.row.ProductName}}</template>
        </el-table-column>
        <el-table-column label="分类" width="150" align="center">
          <template slot-scope="scope">{{scope.row.KindName}}</template>
        </el-table-column>
        <el-table-column label="总销量" width="70" align="center">
          <template slot-scope="scope">{{scope.row.TotalSell}}</template>
        </el-table-column>
        <el-table-column label="虚拟销量" width="80" align="center">
          <template slot-scope="scope">{{scope.row.SellBase}}</template>
        </el-table-column>
        <el-table-column label="总库存" width="70" align="center">
          <template slot-scope="scope">{{scope.row.TotalStock}}</template>
        </el-table-column>
        <el-table-column label="上传者" width="90" align="center">
          <template slot-scope="scope">{{scope.row.RegFullName}}</template>
        </el-table-column>
        <el-table-column label="上传时间" width="90" align="center">
          <template slot-scope="scope">{{scope.row.RegDateTime}}</template>
        </el-table-column>
        <el-table-column label="状态" width="80" align="center">
          <template slot-scope="scope">
            <el-switch
              v-if="scope.row.ProductState==3"
              class="switchStyle"
              v-model="scope.row.ProductState"
              :width="60"
              active-color="#7958b5"
              active-text="上架"
              inactive-color="#e8e4f3"
              inactive-text="草稿"
              :active-value="1"
              :inactive-value="3"
              disabled
            ></el-switch>
            <el-switch
              v-else
              class="switchStyle"
              v-model="scope.row.ProductState"
              :width="60"
              active-color="#7958b5"
              active-text="上架"
              inactive-color="#e8e4f3"
              inactive-text="下架"
              :active-value="1"
              :inactive-value="2"
              @change="onStateChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="90" align="center">
          <template slot-scope="scope">
            <router-link
              target="_blank"
              :to="{name:'previewproduct', query: {id:scope.row.ProductDataID}}"
            >
              <el-button type="text" size="mini">预览</el-button>
            </router-link>
            <router-link
              target="_blank"
              :to="{name:isMkt?'editproductmarket':'editproduct', query: {id:scope.row.ProductDataID}}"
            >
              <el-button type="text" size="mini">编辑</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container" style="margin-top:15px;float:right;">
        <el-pagination
          v-if="total > 0"
          background
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
          :current-page="queryCondidate.page_index"
          :page-sizes="[5,10,20,30,50]"
          :page-size="queryCondidate.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-tabs>
  </div>
</template>
<script>
import {
  getSpList, //url: '/Product/GetSpList'
  setProductState //url: '/product/SetProductState - 发布商品(上架)
} from "@/api/product";

export default {
  props:{
    isMkt:{type:Boolean,default:false}
  },
  components: {
    // switchInner
  },
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      urlBase: "", //http://yf.401520.com
      queryCondidate: {
        page_index: 1,
        page_size: 10,
        condidate: {
          is_market:this.$props.isMkt
        }
      }
    };
  },
  created() {
    this.GetList();
  },
  methods: {
    GetList() {
      this.loading = true;
      getSpList(this.queryCondidate).then(response => {
        if (response.code == 0) {
          let pageData = response.data.page_data;
          this.list = pageData.list;
          this.total = pageData.total_item_count;
          this.urlBase = response.data.url_base;
          let page = {
            total: this.total,
            size: this.queryCondidate.page_size,
            index: this.queryCondidate.page_index
          };
          this.$emit("page", page);
        } else {
          this.$message.error("获取商品列表出错！原因：" + response.msg);
        }
        this.loading = false;
      });
    },
    onStateChange(row) {
      // console.log(row);
      setProductState({ sp_id: row.ProductDataID,state: row.ProductState }).then(r=>{
        let str=row.ProductState==1?'上架':'下架';
        if(r.code==0){
          this.$message.success(`商品${str}成功！`);
        }else{
          this.$message.success(`商品${str}失败！原因：${r.msg}`);
        }
      });
    },
    //----当查询条件变化时由index.vue调用-------------------------------------------
    Query(qc) {
      this.queryCondidate.condidate = qc;
      this.GetList();
    },
    //------------------------------------------------
    onSizeChange(pageSize) {
      this.queryCondidate.page_size = pageSize;
      this.GetList();
    },
    onCurrentChange(pageIndex) {
      this.queryCondidate.page_index = pageIndex;
      this.GetList();
    }
  }
};
</script>